---
import Button from '$components/Button/Button.astro'
import type { CollectionEntry } from 'astro:content'

interface Props {
  entry: CollectionEntry<'showcase'>
}

const { entry } = Astro.props

const isLarge = entry.data.size == 'large'
---

<div
  class={`group rounded-md border border-white/20 text-sm shadow-xl relative aspect-video overflow-hidden flex flex-col ${
    isLarge ? 'col-span-3' : 'col-span-1'
  }`}
>
  <!-- <h1>{entry.data.size}</h1> -->
  <div
    class="flex h-full w-full flex-col items-center justify-center gap-2 bg-blue-900/50 opacity-0 backdrop-blur-lg backdrop-contrast-50 transition-all duration-200 group-hover:opacity-100"
  >
    <h2 class={`font-bold ${isLarge ? 'text-4xl' : 'text-xl'}`}>
      {entry.data.name}
    </h2>
    <p class={`${isLarge ? 'text-lg' : ''}`}>{entry.data.description}</p>
    <div class="mt-4 flex gap-6">
      {
        entry.data.live ? (
          <Button
            href={entry.data.live}
            color="green"
            class="glow-green"
            size={isLarge ? 'm' : 's'}
          >
            Visit
            <Fragment slot="icon-after">→</Fragment>
          </Button>
        ) : (
          ''
        )
      }
      {
        entry.data.repo ? (
          <Button
            href={entry.data.repo}
            size={isLarge ? 'm' : 's'}
            color={'blue'}
            class="glow-blue"
          >
            Code
            <Fragment slot="icon-after">→</Fragment>
          </Button>
        ) : (
          ''
        )
      }
    </div>
  </div>
  <img
    src={entry.data.image}
    class="absolute top-0 -z-10 w-full"
  />
</div>
